<template>
  <div>
      <div class="contentcard">
        <el-card class="box-card" shadow="never">
          <div v-for="item in list" :key="item.activityId" class="text item">
            <div class="desc">{{'活动名称：' + item.activityName }}</div>
            <div class="desc">{{'活动时间：' + item.currentDate }}</div>
            <div class="desc">{{'活动发起者：' + item.userName }}</div>
            <div class="desc">{{'联系方式：' + item.telNumber }}</div>
            <div class="desc">{{'报名情况：' + item.tookNumber + ' / ' + item.limitNumber}}</div>
            <div class="desc">{{'活动简介：' + item.activityDesc }}</div>
          </div>
        </el-card>
      </div>
      <div style="width: 100%;height: 5px;background-color: #ccc;"></div>
      <div>
        <div class="demo-fit" @click="touserdetail(user.userId)">
          <div class="block">
            <el-avatar shape="square" :size="70" :fit="fits" :src="user.userAvatar"></el-avatar>
            <div class="info">
              <div class="nickname">{{user.nickName}}</div>
              <div class="id">{{'ID:'+user.userId}}</div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    name: 'DetailContent',
    props: {
      list: Array,
      user: Object
    },
    data() {
      return {
        fits: 'contains'
      }
    },
    methods: {
      touserdetail(userId) {
        this.$router.push('/userdetail/'+userId)
      }
    }
}
</script>

<style scoped>
  .contentcard {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    font-size: 14px;
  }
  .item {
    padding: 5px 0 0 15px;
  }
  .box-card {
    width: 370px;
    margin-top: 2px;
  }
  .desc {
    line-height: 35px;
    font-size: 16px;
  }
  .block {
    display: flex;
    margin-left: 35px;
    margin-top: 15px;
  }
  .nickname {
    display: flex;
    align-items: center;
    height: 32.5px;
    width: 150px;
    padding: 0 0 0 20px;
  }
  .id {
    display: flex;
    align-items: center;
    height: 32.5px;
    width: 150px;
    padding: 0 0 0 20px;
    font-size: 12px;
    color: #C0C4CC
  }
</style>